<template>
  <a-row :gutter="10" class="box">

    <!-- 表头 -->
    <a-col :md="24" :sm="24">
      <div class="header_left breadcrumb">
        <a-breadcrumb>
          <a-breadcrumb-item>
            <div class="icon_box" style="float: left;">
              <i class="iconfont icon-31shouyexuanzhong"></i>
            </div>
            <div style="float: left; line-height: 30px;"> &nbsp; &nbsp; &nbsp;ESG数聚宝(ESG Databot)/</div>
            <div style="float: left; line-height: 30px;"><a href="">数据填报</a></div>
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </a-col>

    <!-- 标题任务栏 -->
    <a-col :md="24" :sm="14">
      <div style=" font-weight: bold; font-size: 18px;">
        <a-form :form="form" style="max-width: 55%;  margin: 5px auto 0; ">
          <a-form-model-item label="任务名称">
            <a-select default-value="张三的任务" placeholder="请选择任务名称">
              <a-select-option value="张三的任务">张三的任务</a-select-option>
              <a-select-option value=">李四的任务">李四的任务</a-select-option>
              <a-select-option value="王五的任务">王五的任务</a-select-option>
              <a-select-option value="赵六的任务">赵六的任务</a-select-option>
              <a-select-option value="田七的任务">田七的任务</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form>
      </div>
    </a-col>

    <!-- 填写数据列表 -->
    <a-col :md="24" :sm="24">
      <a-row class="content">
        <a-col :span="5">
          <!-- 标题 -->
          <h3>填写数据列表</h3>
          <!-- 搜索框 -->
          <a-input-search placeholder="关键字查询" @change="onChange" />
          <!-- 树结构 -->
          <div class="tree">
            <a-tree defaultExpandAll :showIcon="true" @select="onSelect">
              <a-icon class="icon-cls" slot="switcherIcon" type="minus-circle" style="font-size: 16px" />
              <template v-if="treedatalist.length > 0">
                <a-tree-node v-for="item in treedatalist" :key="item.key" :title="item.title">
                  <a-icon class="icon-cls" slot="icon" :type="item.icon.type" :theme="item.icon.theme" />
                  <template v-if="item.children">
                    <a-tree-node v-for="x in item.children" :key="x.key">
                      <span slot="title">
                        {{ x.title }}
                        <span v-if="x.details" class="company-details">{{ x.details }}</span>
                      </span>
                      <a-icon class="icon-cls" slot="icon" :type="x.icon.type" :theme="x.icon.theme" />
                      <template v-if="x.children">
                        <a-tree-node v-for="y in x.children" :key="y.key">
                          <a-icon class="icon-cls" slot="icon" type="file" theme="filled" />
                          <span slot="title">
                            <template>
                              <a-checkbox v-if="y.type" :checked="defaultCheck" @click="onTreeChange" />
                              <a-icon v-else :type="y.icon.type" :theme="y.icon.theme"
                                :style="{ 'color': y.icon.color || '' }" class="icon-cls" />
                              <span style="margin-left: 10px;" @click="goNewForm(y.path, y.title, y)">{{ y.title }}</span>
                              <span style="background:'#aef';width: 100px;height: 100px; ">
                                <!-- <a-button type="primary" size="small" style="margin: 0 20px;" @click="btnHandler(y.title)"
                                  v-if="submitShow">
                                  未提交
                                </a-button>
                                <a-button type="primary" size="small" style="margin: 0 20px;" @click="btnHandlerSubmit(y)"
                                  v-else>
                                  已提交
                                </a-button> -->
                              </span>
                              <!-- <a-tag color="red" style="margin: 0 20px;" v-if="submitShow">
                                未提交
                              </a-tag>
                              <a-tag color="green" style="margin: 0 20px;" v-else>
                                已提交
                              </a-tag> -->
                              <!-- <a-button type="primary" size="small" style="margin: 0 20px;">
                                未提交
                              </a-button>
                              <a-button type="primary" size="small" style="margin: 0 10px;">
                                提交审核
                              </a-button> -->
                            </template>
                            <span v-if="y.details" class="company-details">{{ y.details }}</span>
                          </span>
                        </a-tree-node>
                      </template>
                    </a-tree-node>
                  </template>
                </a-tree-node>
              </template>
            </a-tree>·
          </div>
        </a-col>
        <!-- 右侧展示区 -->
        <a-col :span="19">
          <DatafillingChildren :title="keyword" @modelData="getModelData" @modelDataValue="getModelDataValue"
            :extra="newextra" :newModelextra="newModelextra" :submitShow="submitShow"></DatafillingChildren>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>
<script>

import axios from 'axios'

import DatafillingChildren from './DatafillingChildren'

const getParentKey = (key, tree) => {
  let parentKey
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some((item) => item.key === key)) {
        parentKey = node.key
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey
}
import { mapState } from 'vuex'
export default {
  name: 'datafillingindex',
  data() {
    return {
      submitShow: true,
      form: {},
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      defaultCheck: true,
      model: {
        source: '',
        data1: '',
        consume: ''
      },
      // 模拟数据
      treeData: [],
      keyword: '',//选中的tree指标
      newextra: {},
      newModelextra: {},
      textera: '',
      modelForm: {},
      // 再次获取数据
      treeInfo: []
    }
  },
  components: { DatafillingChildren },


  mounted() {
    // 获取tree的数据

    this.$store.dispatch('getTreeList')
    this.getTreeList()
    // if (this.textera !== '' || this.modelForm !== {}) {
    //   console.log(this.textera, this.modelForm, '////////////////')
    //   console.log('获取到值')
    // }

  },
  computed: {
    ...mapState({
      treedatalist: state => state.datafilling.treeData,

    })
  },
  updated() {
    // console.log(1)
    // if (this.textera !== '' || this.modelForm !== {}) {
    //   console.log(this.textera, this.modelForm, '////////////////')
    //   console.log('获取到值')
    // }
  },
  methods: {

    submitShow() {
      this.submitShow = !this.submitShow
    },

    async getTreeList() {
      const result = await axios.get('/mock/treeData')
      this.treeInfo = result.data.data
      console.log(result, 'resultresultresult重新获取数据')
    },

    // 第一块
    getModelData(val, type) {
      console.log(val, type, 'val第一块')
      this.textera = val
      console.log(this.textera, 'this.textera///////')
      this.$store.dispatch('savetreeLISt', val)
    },

    // 第二块
    getModelDataValue(val, title, type) {
      this.modelForm = val
      console.log(this.modelForm, type, 'this.modelForm/////////')
      sessionStorage.setItem(title, JSON.stringify(val))
      console.log(val, 'val第二块')
      this.$store.dispatch('savetreeLIStTwo', val)

    },

    // 获取数据
    getData() {
      axios.get('/treeData').then((res) => {
        this.treeData = res.data.dataSource
      })
    },

    onTreeChange(e) {
      this.defaultCheck = !this.defaultCheck
    },

    onChange(e) {
      const value = e.target.value
      this.$store.commit('')
      console.log(value, 'value查询结果')
      // const expandedKeys = this.treedatalist.map((item) => {
      //   if (item.title.indexOf(value) > -1) {
      //     return getParentKey(item.key, gData)
      //   }
      //   return null
      // }).filter((item, i, self) => item && self.indexOf(item) === i)
      // Object.assign(this, {
      //   expandedKeys,
      //   searchValue: value,
      //   autoExpandParent: true
      // })
    },

    onSelect(selectedKeys, info) {
      // console.log('selected', selectedKeys, info,'//我是tree点击的是')
    },

    // 点击左侧树结构展示右侧数据
    goNewForm(url, title, scoped) {
      this.keyword = title
      console.log(scoped, '////template')
      // if (scoped) {
      //   this.newextra = scoped
      //   console.log(this.newextra, '11111111111')
      //   this.newModelextra = scoped
      //   console.log(this.newModelextra,'22222222222222')
      // } else {
      //   scoped = {
      //     title: '',
      //     area: '',
      //     model: {}
      //   }
      //   this.newextra = scoped
      //   this.newModelextra = scoped
      // }
    },
    // 点击tree上的状态按钮
    // btnHandler(title) {
    //   console.log(title, '//////title')
    //   this.treeInfo.forEach(item => {
    //     // debugger
    //     console.log(item, '///////////////item')
    //     item.children.forEach(item1 => {
    //       // debugger
    //       item1.children.forEach(item2 => {
    //         // debugger
    //         console.log(item2.title, '//////////item2')
    //         if (item2.title == title) {
    //           this.submitShow = !this.submitShow
    //         }

    //       })
    //     })
    //   })
    //   // console.log(status, 'statusstatusstatus')
    // },
  }
}
</script>
<style lang="scss" scoped="scoped">
.box {
  background-position: bottom center;
  _background: url(../../../../assets/img/about_1.jpg) no-repeat !important;
  _background: url(../../../../assets/img/assets/bg_1.png) !important;
  background: url(../../../../assets/img/banner1.0.png) !important;
  _background: url(../../../../assets/img/blue2.jpg) !important;

  _height: 140px;
  _width: 100%;
}

.breadcrumb {
  padding: 10px 15px;
  border: 1px solid #eee;
  _margin-bottom: 15px;
  margin: 24px 12px;
  _background: #f5f5f5;
  _background: url(../../../../assets/img/about-banner1.png);
  background: url(../../../../assets/img/banner1.0.png);
  background-position: center center;
  background-size: cover;

  .icon_box {
    width: 30px;
    height: 30px;
    background: #4bc076;
    border-radius: 5px;
    color: #fff;
    line-height: 30px;

    i {
      color: #fff;
      font-size: 26px;
    }
  }
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/*滚动条凹槽的颜色 */
*::-webkit-scrollbar-track-piece {
  background-color: #f8f8f8;
  border-radius: 2em;
}

/*滚动条的背景色 圆角等设置*/
*::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  background-clip: padding-box;
  border-radius: 2em;
}

/*滚动条的鼠标移上去效果*/
*::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}

.content {
  //height: 710px;
  //height: 1000px;
  // height: calc(100% - 55px) !important;
  height: 1500px !important;
  background: #fff;
  margin-top: 15px;
  border-top: 1px solid #eee;
  _background: #d5eff3 !important;

  .icon-cls {
    font-size: 16px;
    color: rgb(24, 144, 255);
  }

  .ant-row {
    _height: 710px;
    height: calc(100% - 55px);
    background: #fff !important;
  }

  .ant-col-5 {
    //height: 100%;
    height: calc(100% - 55px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    //左侧菜单背景
    _background: #d5eff3 !important;

    h3 {
      text-align: left;
      padding-left: 15px;
      font-weight: bold;
      border-left: 3px solid rgb(27, 150, 255);
    }

    ::v-deep .ant-input-search {
      .ant-input {
        height: 35px !important;
        margin-top: 20px;
        border-radius: 20px;
      }

      .ant-input-suffix {
        top: 70%;
      }

      .ant-input-suffix {
        font-size: 18px;
      }
    }

    .tree {
      margin-top: 15px;
      text-align: left;

      .company-details {
        display: inline-block;
        margin-left: 20px;
        padding: 0 15px;
        border-radius: 15px;
        font-size: 12px;
        background: #ff4b19;
        _background: #1890ff;

        color: #fff;
      }
    }
  }
}
</style>
